﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AIKE登录</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../Lib/Home/Login/css/style.css" rel="stylesheet" />
    <link href="../Lib/Home/Login/css/reset.css" rel="stylesheet" />
    <link href="../Common/layUI/theme/layui.css" rel="stylesheet" />
    <script src="../Common/jquery-3.1.1.js"></script>
    <script src="../Common/layUI/layer.js"></script>
</head>
<body>
    <div id="particles-js">
        <div class="login">
            <div class="login-top">
                登录
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img src="~/Lib/Home/Login/img/name.png" /></div>
                <div class="login-center-input">
                    <input type="text" name="" id="txt_name" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'" />
                    <div class="login-center-input-text">用户名</div>
                </div>
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img src="~/Lib/Home/Login/img/password.png" /></div>
                <div class="login-center-input">
                    <input type="password" name="" id="txt_pwd" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'" />
                    <div class="login-center-input-text">密码</div>
                </div>
            </div>
            <div id="login" class="login-button">
                登陆
            </div>
            <a href="Home/Forget" class="forget">忘记密码？</a>

            <div class="three">

                <div class="t" title="QQ登录" style=" background-image:url(/Lib/Home/Login/img/qq.png);">

                </div>

                <div class="t" title="微信登录" style=" background-image:url(/Lib/Home/Login/img/weixin.png);">

                </div>

                <div class="t" title="注册" style=" background-image:url(/Lib/Home/Login/img/gengduo.png);">
                    注册
                </div>

            </div>

        </div>
        <div class="sk-rotating-plane"></div>
    </div>
    <!-- scripts -->
    <script src="../Lib/Home/Login/js/app.js"></script>
    <script type="text/javascript">
    function hasClass(elem, cls) {
            cls = cls || '';
            if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
            return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
        }

        function addClass(ele, cls) {
            if (!hasClass(ele, cls)) {
                ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
            }
        }

        function removeClass(ele, cls) {
            if (hasClass(ele, cls)) {
                var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
                while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                    newClass = newClass.replace(' ' + cls + ' ', ' ');
                }
                ele.className = newClass.replace(/^\s+|\s+$/g, '');
            }
        }
        //document.querySelector(".login-button").onclick = function () {
        //    //addClass(document.querySelector(".login"), "active")
        //    //setTimeout(function () {
        //    //    addClass(document.querySelector(".sk-rotating-plane"), "active")
        //    //    document.querySelector(".login").style.display = "none"
        //    //}, 800)
        //    //setTimeout(function () {
        //    //    removeClass(document.querySelector(".login"), "active")
        //    //    removeClass(document.querySelector(".sk-rotating-plane"), "active")
        //    //    document.querySelector(".login").style.display = "block"
        //    //    alert("登录成功")
        //    //}, 5000)
        //}
</script>

    <script>
        $(function () {

            $("#login").click(function () {
                $.ajax({
                    url: "../Home/Logins",
                    dataType:"json",
                    data: { "name": $("#txt_name").val(), "pwd": $("#txt_pwd").val()},
                    success: function (data) {
                        if (parseInt(data.state) == 1) {
                            debugger
                            addClass(document.querySelector(".login"), "active")
                            setTimeout(function () {
                                addClass(document.querySelector(".sk-rotating-plane"), "active")
                                document.querySelector(".login").style.display = "none"
                            }, 800)
                            setTimeout(function () {
                                removeClass(document.querySelector(".login"), "active")
                                removeClass(document.querySelector(".sk-rotating-plane"), "active")
                                document.querySelector(".login").style.display = "block"
                                layer.msg("登录成功！", { icon:1});
                                location.href ="../"+data.action;
                            }, 3000)
                        }
                        else if (parseInt(data.state) ==0) {
                           
                            layer.msg("账户和密码不能为空！", { icon:2});
                        }

                        else if (parseInt(data.state) ==2) {

                            layer.msg("账号或密码错误！", { icon: 2 });
                        }

                    },
                    error: function () {
                        layer.msg("登录失败！", { icon: 2 });
                    }

                });

            });

        });
    </script>

</body>
</html>
